<template>
  <div>
    <div class="activity_table" style="margin-top:0px;margin-left: 10px">
    <h2>审核活动列表</h2>
    <el-table :data="activities" style="width: 100%">
      <el-table-column prop="name" label="活动名称"></el-table-column>
      <el-table-column prop="activityDescription" label="活动描述"></el-table-column>
      <el-table-column prop="passTime" label="更新时间"></el-table-column>
      <el-table-column label="是否通过">
        <template slot-scope="scope">
          <span v-if="scope.row.check === 2">通过</span>
          <span v-else>未通过</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-slot="{ row }">
        <template>
          <el-button type="text" @click="showDetail(row)">查看详情</el-button>
          <!-- 可以添加其他操作按钮，比如报名 -->
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="approveActivity(scope.row)" >通过</el-button>
          <el-button type="danger" @click="rejectActivity(scope.row.id)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
    <el-dialog
        :visible.sync="dialogVisible"
        title="活动详情"
        :show-close="false"
    >
      <span>活动详情：</span>
      <p v-html="detail"></p>
      <img v-if="imageUrl" :src="imageUrl" alt="活动图片" style="max-width: 100%; height: auto;" />
      <el-button @click="downloadFile" v-if="imageUrl">下载图片</el-button>
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {getCheckByCollege, checkNotPassByCollege, checkPassByCollege, queryCheckStatus} from '../../../../api/check'
import {mapGetters} from 'vuex'
import {getDetail} from '../../../../api/activity'
import {getActivityUrl} from '../../../../api/activityUrl'
import {downloadFile} from '../../../../api/api'
export default {
  inject: ['reload'],
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  },
  data () {
    return {
      detail: '',
      imageUrl: '',
      dialogVisible: false,
      activities: []// 存储从后端获取的活动列表
    }
  },
  mounted () {
    this.fetchActivityStatus()
  },
  methods: {
    downloadFile () {
      getActivityUrl(this.activityId).then(urlResult => {
        console.log(urlResult)
        let obj = {
          path: urlResult[0].url
        }
        downloadFile(obj)
          .then(response => {
            // 通过创建 Blob 对象来处理下载的文件
            const blob = new Blob([response], { type: 'image/jpeg' })

            // 创建一个 URL，用于文件下载
            const downloadUrl = window.URL.createObjectURL(blob)

            // 创建一个 <a> 标签来触发下载
            const link = document.createElement('a')
            link.href = downloadUrl
            link.download = decodeURIComponent(urlResult[0].fileName)
            link.style.display = 'none'

            document.body.appendChild(link)
            link.click()

            // 清理资源
            window.URL.revokeObjectURL(downloadUrl)
            document.body.removeChild(link)
          })
          .catch(error => {
            console.error(error)
            // 处理错误
          })
      })
    },
    showDetail (activity) {
      Promise.all([getDetail(activity.id), getActivityUrl(activity.id)])
        .then(([detailResult, urlResult]) => {
          this.activityId = activity.id
          this.detail = detailResult.activityDescription
          this.imageUrl = urlResult[0].url // 获取第一个对象的 URL 属性
          this.dialogVisible = true
        })
        .catch(error => {
          // 处理错误
          console.error(error)
          this.$message.error('获取活动详情或链接时出错')
        })
    },
    closeDialog () {
      this.dialogVisible = false
    },
    async approveActivity (activity) {
      try {
        await checkPassByCollege(this.userId, activity.id)
        this.$notify({
          message: '审核通过',
          type: 'success'
        })
        await this.fetchActivityStatus()
      } catch (error) {
        console.error('Error approving activity:', error)
      }
    },

    async rejectActivity (aid) {
      try {
        await checkNotPassByCollege(this.userId, aid)
        this.$notify({
          message: '审核不通过',
          type: 'error'
        })
        await this.fetchActivityStatus()
      } catch (error) {
        console.error('Error rejecting activity:', error)
      }
    },

    async fetchActivityStatus () {
      try {
        const uid = this.userId
        const response = await getCheckByCollege(uid)
        const activities = response.map(async (activity) => {
          const res = await queryCheckStatus(this.userId, activity.id)
          console.log(res)
          activity.check = res.status
          activity.passTime = res.createTime.substring(0, 10)
          return activity
        })
        this.activities = await Promise.all(activities)
        console.log(this.activities) // 更新后的 activities 数组，包含了 check 属性
      } catch (error) {
        console.error('Error updating activities with check status:', error)
      }
    },

    async mounted () {
      await this.fetchActivityStatus()
    }

  }
}
</script>

<style scoped>
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
</style>
